<!--
 * @Description: 添加组件，蒙层对话框
 * @Author: youzi
 * @Date: 2020-05-20 14:11:14
 * @LastEditors: youzi
 * @LastEditTime: 2020-09-15 10:44:34
--> 
<template>
  <a-modal
    centered
    title="详情"
    closable
    v-model="realVisible"
    :footer="null"
    @cancel="onClose"
    :maskClosable="false"
    :bodyStyle="bodyStyle"
    :width="600"
  >
    <a-form :form="form">
      <a-form-item v-bind="formItemLayout" v-for="(item, index) in formItem" :key="index" :label="item.label"> 
        <span v-if="item.type === 'file'">
          <a :href="initRecord[item.decorator]" target="_blank" v-if="initRecord['fileType'] === 'image'">
            <img class="img"  :src="initRecord[item.decorator]" alt="" />
          </a>
          <a-tag color="blue" v-else>
              <a @click="handlePreview(initRecord['relativePath'])">{{initRecord['fileName']  }}</a>
            </a-tag>
        </span> 
        <span v-else>
          {{ initRecord[item.decorator] }}
        </span>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
// import moment from 'moment';
// import { dateRender } from 'utils/common';
import formItem from './form-data-info';

// import debounce from 'lodash/debounce';
const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 12 }
};
export default {
  name: 'info',
  props: {
    status:  [],
    visible: {
      default: false
    },
    initRecord: {
      type: Object,
      default: () => ({})
    },
    // 下载文件
    apiURL: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      formItem,
      formItemLayout,
      form: this.$form.createForm(this)

      // 上传文件渲染列表
      // renderData
    };
  },
  mounted() {},
  computed: {
    bodyStyle() {
      return {
        maxHeight: window.innerHeight * 0.8 + 'px',
        overflowY: 'scroll',
        padding: 0
      };
    },
    realVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        return val;
      }
    }
  },
  methods: {
    // dateRender,
    /**
     * @desc: 预览文件函数
     * @param {object} file
     * @author: youzi
     */
    handlePreview(file) {
      this.$download(this.apiURL.downloadFile + `?path=${file}`, {}, file);
    },
    onClose() {
      this.$emit('close');
    }
  },
  watch: {}
};
</script>
<style scoped>
  .img {
    width: 100%;
  }
</style>
